<template>
  <v-navigation-drawer
    v-model="drawer"
    :color="color"
    :expand-on-hover="expandOnHover"
    :mini-variant="miniVariant"
    :src="bg"
    :width="width"
    permanent
    absolute
  >
    <v-list dense>
      <v-subheader>商品分类</v-subheader>
      <v-list-item-group color="primary">
        <v-list-item
          v-for="(item, i) in categories"
          :key="i"
          @click="onBtnClick(i)"
        >
          <v-list-item-content>
            <v-list-item-title v-text="item.name"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  props: {
    width: {
      required: true,
      type: String
    },
    categories: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      drawer: true,
      items: [
        { text: 'Real-Time', icon: 'mdi-clock' },
        { text: 'Audience', icon: 'mdi-account' },
        { text: 'Conversions', icon: 'mdi-flag' }
      ],
      color: '#F2F2F2',
      colors: ['primary', 'blue', 'success', 'red', 'teal'],
      miniVariant: false,
      expandOnHover: false,
      background: false
    };
  },
  methods: {
    onBtnClick(index) {
      this.$store.dispatch('refreshChildCategories', index);
    }
  },
  watch: {
    categories() {
      if (this.categories.length > 0) {
        this.$emit('onBtnClick', 0);
      }
    }
  },
  computed: {
    bg() {
      return this.background
        ? 'https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg'
        : undefined;
    }
  }
};
</script>
